<template>
    <view class="question">
        <view class="questionList">
            <view v-if="list.length>0" class="questionItem flex flex-align out-shadow" v-for="(item,index) in list" :key="index">
                <image src="/static/logo.png"></image>
                <view class="questionItemText flex flex-column flex-bt">
                    <view class="title">{{item.name}}</view>
                    <view class="content two-omit">这里是内容，这里是内这这里是内容，这里是内这里是内容，这里是内容这里是内容这里是内容这里是内容这里是内里是内容，这里是内容这里是内容这里是内容这里是内容这里是内</view>
                    <view class="more flex flex-align flex-bt">
                        <view class="left">{{ item.create_at }}发布</view>
                        <view class="right">
                            查看详情
                        </view>
                    </view>
                </view>
            </view>
            <noData v-else img="/static/nodata/nodata02.png" style="padding-top: 10vh;"></noData>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import API_CONFIG from '@/api/config'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
import noData from '@/components/noData/noData.vue';
onLoad(()=>{
    loadMore()
})

const { list, isLoading, hasMore, loadMore } = useInfiniteLoad(API_CONFIG.business, {
    initialParams: {},
    transformResponse: (response) => {
        return response.list || [];
    }
});
onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
.questionList{
    padding: 20rpx 30rpx;
    .questionItem{background: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;
        image{
            width: 170rpx;height: 170rpx;
        }
        .questionItemText{
            flex: 1;height: 170rpx;
            margin-left: 20rpx;
            .title{
                font-size: 28rpx;
                font-weight: bold;
            }
            .content{
                font-size: 24rpx;
                color: #969799;
            }
            .more{
                font-size: 24rpx;
                color: #969799;
                .right{
                    font-size: 24rpx;
                    color: #323233;
                }
            }

        }

        
    }

}
</style>
